<template>
  <div class="ProductReviewList">
    <van-nav-bar title="商品评价" :border="false" left-arrow fixed placeholder @click-left="$router.back()"/>
    <div class="ProductReviewListFilterBar">
      <white-space/>
      <wing-blank>
      <!--  <van-row type="flex" justify="space-between" align="center">
          <van-col>
            <van-checkbox icon-size="16px" v-model="variant">只看当前商品</van-checkbox>
          </van-col>
        </van-row>
        <white-space/>-->
        <product-review-list-tags :product-id="productId" @ratings-change="changeRatings"/>
      </wing-blank>
      <white-space/>
    </div>
    <white-space/>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
              @load="loadReviews">
      <product-review-list-item v-for="review in reviews" :key="review.id" :review="review"/>
    </van-list>
  </div>
</template>

<script>
import { catalog } from "@mall/api-services"
import { Checkbox, Col, List, NavBar, Row } from "vant"
import WingBlank from "@/components/WingBlank"
import WhiteSpace from "@/components/WhiteSpace"
import ProductReviewListItem from "@/views/product/ProductReviewListItem"
import ProductReviewListTags from "@/views/product/ProductReviewListTags"

export default {
  name: "ProductReviewList",
  components: {
    ProductReviewListTags,
    ProductReviewListItem,
    WhiteSpace,
    WingBlank,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [NavBar.name]: NavBar,
    [Checkbox.name]: Checkbox,
  },
  props: {
    productId: String,
  },
  data() {
    return {
      variant: false,
      reviews: [],
      page: 0,
      limit: 20,
      loading: false,
      finished: false,
      ratings: [],
    }
  },
  watch: {
    ratings: "refreshReviews",
  },
  created() {
    this.refreshReviews()
  },
  methods: {
    refreshReviews() {
      const { productId, ratings, limit } = this
      this.reviews = []
      this.loading = true
      this.finished = false
      catalog.ReviewServiceV1
          .createReviewQuery()
          .page(1).limit(limit)
          .productId(productId)
          .ratings(ratings)
          .list()
          .then(pageReviews => {
            this.loading = false
            this.page = pageReviews.page
            this.reviews = pageReviews.elements
            this.finished = pageReviews.page >= pageReviews.totalPages
          })
    },
    loadReviews() {
      const { productId, ratings, page, limit } = this
      this.loading = true
      this.finished = false
      catalog.ReviewServiceV1
          .createReviewQuery()
          .page(page + 1).limit(limit)
          .productId(productId)
          .ratings(ratings)
          .list()
          .then(pageReviews => {
            this.loading = false
            this.page = pageReviews.page
            this.reviews.push(...pageReviews.elements)
            this.finished = pageReviews.page >= pageReviews.totalPages
          })
    },
    changeRatings(ratings) {
      this.ratings = ratings
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.ProductReviewList {
  .ProductReviewListFilterBar {
    background: #fff;

    ::v-deep .van-checkbox__label {
      font-size: 14px;
    }
  }
}
</style>
